<template>
<div id="app">
  <el-container>
  <el-header>
  <!-- 上方的demo按钮 -->
  <el-row  class="demomenu">
  <el-button type="primary" plain @click="demo1fn">demo1</el-button>
  <el-button type="primary" plain @click="demo2fn">demo2</el-button>
</el-row>
  </el-header>
  <el-main>
  <el-row>
  <el-col :span="16">
       <!-- 左边的画布 -->
  <div class="treecanvas">
   <router-view/>
   </div>
  </el-col>
  <el-col :span="8">
    <!-- 右边的解析栏 -->
   <div class="asidemenu">
   <TreeMenu />
   </div>
  </el-col>
</el-row>
  </el-main>
</el-container>
</div>

</template>
<script>
import TreeMenu from '@/views/menu.vue'
export default {
  components: {
    TreeMenu
  },
  methods: {
    demo1fn () {
      this.$router.push({
        path: '/demo1'
      })
    },
    demo2fn () {
      this.$router.push({
        path: '/demo2'
      })
    }
  }
}
</script>

<style lang="less">
html,
body,
.treecanvas,
.asidemenu{
    width: 100%;
    height: 100%;
}
.el-main{
    padding:0 !important;
}
.asidemenu{
   height: 100%;
   width: 100%;
}
</style>
